<template>
    <el-container>
        <el-main class="wrapper main">
            <v-breadcrumb v-bind:breadcumb="breadcumb"></v-breadcrumb>
            <section class="panel" :style="{'min-height': mainHeight+'px'}">
                <div class="panel-body">
                    <div class="btn-group" style="margin-bottom: 15px">
                        <el-button @click="list" type="primary" icon="fa fa-refresh"
                                   size="small"> 刷新
                        </el-button>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>用户</span>
                                </div>
                                <div class="text item">今日新增: <span style="color: red">{{counts['userNew']}}</span></div>
                                <div class="text item">今日活跃: <span style="color: red">{{counts['userLogin']}}</span></div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>文章</span>
                                </div>
                                <div class="text item">今日新增: <span style="color: red">{{counts['articleNew']}}</span></div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>统计</span>
                                </div>
                                <div class="text item">今日浏览数: <span style="color: red">{{counts['countView']}}</span></div>
                                <div class="text item">今日有效分享数: <span style="color: red">{{counts['countShareIn']}}</span></div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="box-card" style="height: 380px">
                                <div slot="header" class="clearfix">
                                    <span>管理员当日统计</span>
                                </div>
                                <table width="100%" style="text-align: center">
                                    <tr>
                                        <td width="16%">管理员</td>
                                        <td width="28%">浏览量</td>
                                        <td width="28%">有效量</td>
                                    </tr>
                                    <tr v-for="(item,index) in counts.countCurrentDayNum" :key="index" class="text item">
                                        <td>{{manages[item.admin_id]}}</td>
                                        <td><span style="color: red">{{item.views}}</span></td>
                                        <td><span style="color: red">{{item.shareins}}</span></td>
                                    </tr>
                                </table>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="box-card" style="height: 380px">
                                <div slot="header" class="clearfix">
                                    <span>管理员当月统计</span>
                                </div>
                                <table width="100%" style="text-align: center">
                                    <tr>
                                        <td width="16%">管理员</td>
                                        <td width="28%">浏览量</td>
                                        <td width="28%">有效量</td>
                                    </tr>
                                    <tr v-for="(items,index) in counts.countCurrentMonthNum" :key="index" class="text item">
                                        <td>{{manages[items.admin_id]}}</td>
                                        <td><span style="color: red">{{items.views}}</span></td>
                                        <td><span style="color: red">{{items.shareins}}</span></td>
                                    </tr>
                                </table>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="box-card" style="height: 380px">
                                <div slot="header" class="clearfix">
                                    <span>管理员当月平均阅读</span>
                                </div>
                                <table width="100%" style="text-align: center">
                                    <tr>
                                        <td width="12%">管理员</td>
                                        <td width="40%">文章数</td>
                                        <td width="40%">平均阅读</td>
                                    </tr>
                                    <tr v-for="(items,index) in counts.countCurrentArticleNew" :key="index" class="text item">
                                        <td>{{manages[items.userid]}}</td>
                                        <td><span style="color: red">{{items.nums}}</span></td>
                                        <td><span style="color: red">{{items.avg}}</span></td>
                                    </tr>
                                </table>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import vBreadcrumb from '../layout/breadcrumb.vue';
    import {IndexCount,ManageAll} from '../../utils/axios';
    import { VueCropper }  from 'vue-cropper';
    export default {
        components:{vBreadcrumb,VueCropper},
        data(){
            return {
                breadcumb:[{name: "美文首页"}],
                counts: [],
                manages: [],
            }
        },
        activated(){
            this.$store.dispatch('setActive', '/main');
            ManageAll().then((res)=>{
                if(res.code){
                    this.$message.error(res.msg);
                }else{
                    this.manages = res.data;
                    this.list();
                }
            })
        },
        computed: {
            ...mapGetters(['active','mainHeight','loading','upload']),
        },
        methods: {
            list(){
                IndexCount().then((res)=>{
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        this.counts = res.data;
                    }
                })

            }
        }
    }
</script>
<style>
    .box-card{
        height: 200px;
        margin-bottom: 15px;
    }
    .box-card .item{
        font-size: 14px;
    }
    .box-card .item span{
        font-size: 18px;padding: 0 10px;
    }
    .main .text{
        height: auto;border: none;
    }
</style>
